import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../../../utils/xh_styles.dart';
import '../../../../utils/xin_he_image.dart';
import '../../../home/views/xin_he_tab_custom_indicator.dart';
import 'xin_he_my_coupon_logic.dart';

class XinHeMyCouponPage extends StatelessWidget {
  XinHeMyCouponPage({Key? key}) : super(key: key);

  final logic = Get.put(XinHeMyCouponLogic());
  final state = Get.find<XinHeMyCouponLogic>().state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          leading: IconButton(
              onPressed: (){
                Get.back();
              },
              icon: Container(
                padding: const EdgeInsets.only(left: 7),
                alignment: Alignment.centerLeft,
                child: const XinHeAssetImage(
                  'assets/images/home/app_back_3.png',
                  width: 9.5,
                  height: 17,
                  fit: BoxFit.cover,),
              )
          ),
          backgroundColor: Colors.white,
          shadowColor: Colors.transparent,
          title: Text('优惠券',style: TextStyle(color:XinHeColor('#222222'),fontSize: 17,fontWeight: FontWeight.w600)),
          centerTitle: true,
        ),
      body: Column(
        children: [
          _tabsView(),
          Expanded(
            child: ListView.builder(
                padding: EdgeInsets.only(top: 10),
                itemCount: 10,
                itemBuilder: (ctx,index){
                  return _itemView();
                }),
          )
        ],
      ),

    );
  }


  Widget _tabsView() {
    return  Container(
      height: 44,
      color: Colors.white,
      child: TabBar(
          onTap: (index){
            logic.currentIndex.value = index;
          },
          controller: logic.tabsTabController,
          labelColor: XinHeColor('#2B3131'),
          unselectedLabelColor: XinHeColor('#909696'),
          labelStyle: const TextStyle(fontSize: 15,fontWeight: FontWeight.w600 ),
          unselectedLabelStyle: const TextStyle(fontSize: 13,fontWeight: FontWeight.w400 ),
          indicator: RoundedTabIndicator(width: 29,height: 2),
          indicatorPadding: const EdgeInsets.only(top: 8),
          // labelPadding: EdgeInsets.symmetric(horizontal: logic.getPaddingWidth()) ,
          tabs: logic.tabList.map((e) => Container(
            height: 44,
            alignment: Alignment.center,
            child: Text(e,softWrap: false,),
          )).toList()

      ),
    );
  }

  Widget _itemView() {
    return Container(
      color: Colors.white,
      height: 95,
      width: double.infinity,
      margin: const EdgeInsets.symmetric(horizontal: 15,vertical: 5),
      child: Row(
        children: [

           Stack(children: [
             XinHeAssetImage('assets/images/mine/can_use_bg.png',width: 107,height: 95,),
             SizedBox(
               width: 107,
               height: 95,
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.center,
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: [
                   RichText(
                     text: TextSpan(children: [
                       ///￥
                       TextSpan(
                         text: '￥',
                         style: TextStyle(
                           color: XinHeColor('#E84128'),
                           fontSize: 13,
                           fontWeight: FontWeight.w500,
                         ),
                       ),

                       ///
                       TextSpan(
                         text: '50',
                         style: TextStyle(
                           color: XinHeColor('#E84128'),
                           fontSize: 33,
                           fontWeight: FontWeight.w500,
                         ),
                       ),

                     ]
                     )),
                   Text('无门槛',style: TextStyle(color: XinHeColor('#E84128'),fontSize: 12,fontWeight: FontWeight.w500),)

               ],),
             )
           ],),

          SizedBox(width: 15,),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
            Text('无门槛优惠券',style: TextStyle(color: XinHeColor('#2B3131'),fontWeight: FontWeight.w500,fontSize: 14),),
            SizedBox(height: 10,),
            Text('2022.07.08-2022.09.07  ',style: TextStyle(color: XinHeColor('#8C9999'),fontWeight: FontWeight.w500,fontSize: 12),),
            Row(children: [
              Text('使用规则',style: TextStyle(color: XinHeColor('#8C9999'),fontWeight: FontWeight.w500,fontSize: 12),),
              SizedBox(width: 3,),
              XinHeAssetImage('assets/images/mine/coupon_arrow.png',width: 5.5,height: 9.5,),

            ],)


          ],),

          Spacer(),

          // GestureDetector(
          //   onTap: (){
          //   },
          //   child: Container(
          //     height: 30,
          //     width: 75,
          //     alignment: Alignment.center,
          //     decoration: BoxDecoration(
          //       gradient: LinearGradient(colors: [ XinHeColor('##F89A30'), XinHeColor('#E84128')]),
          //       borderRadius: BorderRadius.circular(15),
          //     ),
          //     child: const Text('去使用',style: TextStyle(color: Colors.white,fontSize: 14),strutStyle: StrutStyle(forceStrutHeight: true),),
          //   ),
          // ),
          
          XinHeAssetImage('assets/images/mine/used.png',width:64,height: 64 ,),

          SizedBox(width: 15,),

        ],
      ),);
  }
}
